<template>
    <div class="tab">
        <router-link tag="div" class="tab-item" to="/bookslist">
            <i class="fa fa-book">
            </i>
            商品列表
        </router-link>
        <router-link tag="div" class="tab-item" to="/cart">
            <i class="fa fa-shopping-cart">
            </i>
            购物清单
        </router-link>
        <router-link tag="div" class="tab-item" to="/user">
          <i class="fa fa-user-circle-o">
          </i>
          个人中心
        </router-link>
    </div>
</template>

<script type="text/ecmascript-6">
export default {};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.tab {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-top: 1px solid #f1f1f1;

    .tab-item {
        flex: 1;
        text-align: center;
        font-size: $font-size-s;

        i {
            display: block;
            font-size: $icon-size-m;
        }

        &.router-link-active {
            color: $color-main;
        }
    }
}
</style>
